<template>
  <div class="tag-record-user-detail-user">
    <el-card>
      <tag-content-header>
        <template #title>
          <span class="title-text">用户访问详情</span>
        </template>
      </tag-content-header>
      <div class="record-user-option">
        <el-radio-group v-model="dateType" size="mini" @change="dateTypeChange">
          <el-radio-button :label="1">今天</el-radio-button>
          <el-radio-button :label="2">昨天</el-radio-button>
          <el-radio-button :label="3">最近7天</el-radio-button>
          <el-radio-button :label="4">最近30天</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          size="mini"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="timeChange"
        >
        </el-date-picker>
      </div>
      <div class="record-user-table">
        <tag-content-header search refresh setting @toolFun="toolFun" :settingData="columns"></tag-content-header>
        <tag-table
          ref="table"
          @refresh="getList"
          :data="dataList"
          :loading="loading"
          :columns="columns"
          :params="params"
          :total="totalSize"
        >
          <template #openPage="{ scope }">
            <span>{{ setUrl(scope.row.openPage) }}</span>
          </template>
        </tag-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateType: 1,
      dateTime: '',
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '受访页面',
          prop: 'openPage',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '用户',
          prop: 'loginUname',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '公司',
          prop: 'compNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '部门',
          prop: 'deptNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '访问时间',
          prop: 'openTm',
          align: 'right',
          sort: true
        },
        {
          show: true,
          label: '客户端IP',
          prop: 'operatorIp',
          search: true,
          searchKey: ''
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.dateTypeChange()
  },
  methods: {
    getList() {
      this.loading = true
      let params = Object.assign({}, this.params, {
        startDate: this.dateTime[0],
        endDate: this.dateTime[1],
        userId: this.$route.params.userId
      })
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysOperateRecord/userVisitDetail'),
        method: 'get',
        params: this.$ajax.setParams(params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    setUrl(url) {
      return window.location.origin + url
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    dateTypeChange() {
      var time = new Date().getTime()
      var start = ''
      var end = ''
      var utils = this.$utils
      switch (this.dateType) {
        case 1:
          end = start = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 2:
          end = start = utils.formatDateTime(new Date(time - 86400000)).slice(0, 10)
          break
        case 3:
          start = utils.formatDateTime(new Date(time - 86400000 * 6)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 4:
          start = utils.formatDateTime(new Date(time - 86400000 * 29)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
      }
      this.dateTime = [start, end]
      this.$nextTick(() => {
        this.getList()
      })
    },
    timeChange() {
      this.dateType = ''
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.tag-record-user-detail-user {
  .tag-content-header {
    padding: 0 20px;
  }
  .record-user-option {
    padding: 0 20px;
    .el-date-editor {
      vertical-align: middle;
      margin: 0 30px;
    }
  }
  .record-user-table {
    margin-top: -30px;
    padding: 0 20px;
    .tag-content-header {
      padding: 0;
    }
  }
}
</style>
